// 清除浮动
.clearfix() {
    &::after {
        content: '';
        height: 0;
        line-height: 0;
        display: block;
        visibility: hidden;
        clear: both;
    }
}

// 滚动条
.scroll-bar(@width: 10px, @height: 10px) {
    &::-webkit-scrollbar-track {
        // border-radius: 10px;
        background-color: #ffffff;
    }

    &::-webkit-scrollbar {
        width: @width;
        height: @height;
        background-color: #ffffff;
    }

    &::-webkit-scrollbar-thumb {
        // border-radius: 10px;
        // background-color: rgba(0, 0, 0, 0.2);
        background-color: #ccc;
    }
}

// 绘制关闭图标
.md-close-icon(@width: 50px, @height: 50px) {
    font-size: 0;

    &::before,
    &::after {
        content: '';
        width: @width;
        height: @height;
        /* 伪元素before和after添加的内容默认是 inline 元素 */
        /* inline内容有多大，它就有多大，不能设置宽和高 */
        /* 必须显示为block */
        display: block;
        background-color: #fff;
        position: absolute;
        left: 25%;
        top: 50%;
    }

    &::before {
        transform: rotate(45deg);
    }

    &::after {
        background-color: #fff;
        transform: rotate(-45deg);
    }
}

// 三横杠样式方法
.md-icon-hang(@color: #f00, @line: 5px, @width: 25px, @height: 18px) {
    display: block;
    width: @width;
    height: @height;
    position: relative;
    border-bottom: @line solid @color;
    cursor: pointer;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: @line;
        background-color: @color;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    &::after {
        content: '';
        display: block;
        width: 100%;
        height: @line;
        background-color: @color;
        position: absolute;
        bottom: 40%;
        left: 0px;
    }
}